<!--
 * @description: 白名单页面
 * @Author: Coder
 * @Date: 2019-12-20 10:57:43
 * @LastEditors: Coder
 -->
<template>
  <div>
    <a-modal :width="650" title="添加白名单" :visible="show" @cancel="$emit('update:show', false)" @ok="handleOk">
      <a-layout-content>
        <a-row type="flex">
          <!-- left -->
          <a-col :span="12">
            <a-row class="tree-body">
              <white-tree :data.sync="treeData" />
            </a-row>
          </a-col>
          <!-- right -->
          <a-col :span="9" class="mg_l20 ">
            <a-row class="sub_tit mg_b5">已经选择的部门或成员</a-row>
            <a-row v-for="(item, i) in whitelist" :key="i" class="pd_6"> <a-icon class="mg_r5" type="user" />{{ item.empInfoName }} </a-row>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-modal>
  </div>
</template>

<script>
import { Check, Common } from "@/api/check";
import WhiteTree from "../../custom/customTree/white-tree";
import { mapState } from "vuex";
export default {
  components: { WhiteTree },
  props: ["show", "whiteOptions"],
  data() {
    return {
      obj: {},
      /* 部门 */
      treeData: [],
      value: "选择部门",
      /* 添加白名单 */
      whitelist: [],
      replaceFields: {
        children: "childList",
        title: "name",
        key: "id"
      }
    };
  },
  computed: {
    ...mapState(["hr"])
  },
  watch: {
    show(val) {
      if (val) {
        this.getSelectDepTree();
        this.whitelist = this.whiteOptions.whitelist;
      }
    }
  },

  mounted() {
    this.$eventBus.$on("whiteLists", () => {
      this.whitelist = [];
      this.deep(this.treeData);
    });
  },
  beforeDestroy() {
    this.$eventBus.$off("whiteLists");
  },
  methods: {
    // 递归
    deep(data, whitelist) {
      data.map(v => {
        if (v.isSelected) {
          if (!v.isDept) {
            v.depInfoId = v.parentId;
            v.depInfoName = v.parentName;
            v.empInfoId = v.id;
            v.empInfoName = v.name;
            this.whitelist.push(v);
          }
        }
        if (v.hasChild) {
          this.deep(v.childList);
        }
      });
      return {
        whitelist: this.whitelist
      };
    },
    // 处理选中状态
    handlerChose(data) {
      const white = this.whiteOptions.whitelist;
      data.map(s => {
        white.map((v, i) => {
          if (white[i].empInfoId === s.id && white[i].depInfoId === s.parentId) {
            s.isSelected = true;
          }
        });
        if (s.hasChild) {
          this.handlerChose(s.childList);
        }
      });
    },

    /* onSelect */
    onSelect(selectedKeys, info) {
      const { parentId: depInfoId, parentName: depInfoName, name: empInfoName, id: empInfoId } = info.node.dataRef;
      if (info.selected) {
        this.whitelist.push({
          depInfoId,
          depInfoName,
          empInfoName,
          empInfoId
        });
      } else {
        this.whitelist.find((value, i, arr) => {
          if (value.empInfoId === info.node.dataRef.id) return arr.splice(i, 1);
        });
      }
    },
    /* 删除选中 */
    delItem(i) {
      // this.whitelist.splice(i, 1);
    },
    /* 获取部门树 */
    getSelectDepTree() {
      Check({
        url: Common.selectDepInfoTree,
        params: {
          companyId: this.hr.companyId,
          type: 2
        }
      }).then(({ data }) => {
        this.handlerChose(data);
        this.treeData = data;
      });
    },
    /* 处理数据 */
    disabled(arr) {
      arr.map(value => {
        if (value.isDept) {
          value.disabled = true;
          if (value.childList) {
            this.disabled(value.childList);
          }
        }
      });
      return arr;
    },
    /* ok */
    handleOk(e) {
      this.$emit("whiteEditors", this.whitelist);
      this.$emit("update:show", false);
    }
  }
};
</script>
<style lang="scss" scoped>
ul {
  padding: 0;
}
.tree-body {
  height: 400px;
  overflow-y: scroll;
  border-right: 1px solid #f1f1f1;
}
.tree-item {
  padding: 10px 0;
}
</style>
